<template>
  <div class="baseinfo">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="baseInfo"
      label-width="100px"
      class="forms"
      :disabled="edit ? true : false"
    >
      <el-form-item label="头像" prop="avatar" v-if="infBox">
        <!-- <el-upload
          class="avatar-uploader"
          :headers="{
            Authorization: 'Bearer ' + token,
          }"
          action="https://www.acmemach.cn/prod-api/system/user/profile/upload-avatar"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
        <el-upload
          class="avatar-uploader"
          :headers="{
            Authorization: 'Bearer ' + token,
          }"
          action="https://www.acmemach.cn/uat-api/system/user/profile/upload-avatar"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


        

        <!-- <el-upload
          class="avatar-uploader"
          action="https://www.acmemach.cn/prod-api/system/user/profile/upload-avatar"
          :headers="{
            Authorization: 'Bearer ' + token,
          }"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload> -->
      </el-form-item>

      <el-form-item label="昵称" prop="nickName">
        <el-input
          placeholder="请输入昵称"
          v-model="ruleForm.nickName"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phonenumber">
        <el-input
          placeholder="请输入手机号"
          v-model="ruleForm.phonenumber"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input placeholder="请输入邮箱" v-model="ruleForm.email"></el-input>
      </el-form-item>

      <el-form-item v-if="!edit ? true : false">
        <el-button plain @click="cancel()">取消</el-button>
        <el-button type="primary" @click="submitForm('baseInfo')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { profile } from "../../apis/index";
export default {
  props: ["infBox", "edit"],
  name: "baseinfo",
  components: {},
  data() {
    return {
      token: "",
      // 基础信息
      ruleForm: {
        avatar: "",
        nickName: "",
        phonenumber: "",
        email: "",
      },
      rules: {
        avatar: [
          {
            required: true,
            message: "请上传头像",
            trigger: ["blur", "change"],
          },
        ],
        nickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        phonenumber: [
          {
            required: true,
            pattern: /^[1][0-9]{10}$/,
            message: "请输入有效的手机号",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    // 获取开始时间和结束时间
    infBox: {
      handler(selectDay) {
        console.log(selectDay, 5555);
        this.ruleForm.avatar = selectDay?.avatar;
        this.ruleForm.nickName = selectDay?.nickName;
        this.ruleForm.phonenumber = selectDay?.phonenumber;
        this.ruleForm.email = selectDay?.email;
      },
      deep: true, //如果改成监听searchData，然后把这行放开，就可以监听到searchData中任一值
    },
  },
  computed: {},
  mounted() {
    this.token = localStorage.getItem("jztoken");
  },
  methods: {
    //上传头像
    handleAvatarSuccess(res, file) {
      this.ruleForm.avatar = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          profile(this.ruleForm)
            .then((res) => {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.$emit("FnbaseInofo", true);
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancel() {
      this.$emit("FnbaseInofo");
    },
  },
};
</script>

<style lang="scss" scoped>
.forms {
  width: 500px;
  margin: 50px 0;
}
::v-deep .el-button.is-plain:focus,
.el-button.is-plain:hover {
  border: 1px solid #25a2ab;
  color: #25a2ab;
}
.baseinfo {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
}
</style>